import { BannerList } from '../api/list';
import { useEffect, useState } from 'react';
import { Swiper, Toast } from 'antd-mobile'
import styles from './home.module.css'
function Home() {
    const [list, setList] = useState([]);
    const items = list.map((item, index) => (
        <Swiper.Item key={item.banner_id}>
            <div
                className={styles.content}
                style={{ backgrounImage: `url(${item.image_url})` }}
                onClick={() => {
                    Toast.show(`你点击了卡片 ${index + 1}`)
                }}
            >
            </div>
        </Swiper.Item>
    ));
    useEffect(() => {
        BannerList().then(res => {
            if (res.code === 200) {
                setList(res.data)
                console.log(list, "res")
            }
        })
    }, [])

    return (
        <>
            <Swiper
                loop
                autoplay
                onIndexChange={i => {
                    console.log(i, 'onIndexChange1')
                }}
            >
                {items}
            </Swiper>
        </>
    )
}
export default Home;